<template>
	<view class="data-stat" :style="{ background: `url(${assetsPath}cf956855eabdd169264a8a8c6b89d037f5228169.png) left top/100% calc(${navBarHeight}px + 280rpx) no-repeat` }">
		<nav-bar title="数据中心" :color="navBarColor" :bg="navBarBg" />

		<view class="address">
			<view class="flex-space-between">
				<view class="flex-align">
					<van-image width="74rpx" height="74rpx" radius="2" style="margin-right: 10rpx;" />
					<view>
						<view class="address-name">点托综合体育馆</view>
						<view class="address-desc">地址:南通市崇川区工农南路盛天大厦156号</view>
					</view>
				</view>
				<view class="exchange flex-center flex-column " @click="show = true">
					<van-icon name="exchange" size="16" />
					切换
				</view>
			</view>
		</view>

		<view class="data-stat-wrapper">
			<view class="dates d-flex">
				<view v-for="item in dates" :key="item.value" class="date-item flex-center"
					:class="{ active: dateActive === item.value }">
					{{ item.label }}
				</view>
			</view>

			<view class="data-wrapper">
				<view class="date">5月8日</view>
				<van-row class="text-center">
					<van-col :span="8">
						<view class="value">19,356</view>
						<view class="label">总收入</view>
					</van-col>
					<van-col :span="8">
						<view class="value">5000</view>
						<view class="label">订单数(笔)</view>
					</van-col>
					<van-col :span="8">
						<view class="value">302</view>
						<view class="label">新增用户(人)</view>
					</van-col>
				</van-row>
			</view>
		</view>

		<view class="title">收入趋势</view>
		<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />

		<view class="title">分类报表</view>
		<van-row class="classify text-center">
			<van-col :span="6" v-for="item in classify" :key="item.label">
				<view class="box" @click="onClick(item)">
					<van-image :src="assetsPath + item.img" width="110rpx" height="110rpx" />
					<view class="label">{{ item.label }}</view>
				</view>
			</van-col>
		</van-row>

		<van-popup closeable :show="show" round position="bottom" @close="show = false">
			<view class="good-box">
				<view class="title">
					切换场馆
				</view>
				<view class="good-list">
					<van-radio-group :value="radio" @change="onChange">
						<view class="good-item" v-for="(item,index) in 10" :key="index">
							<van-radio :name="index">
								<view class="flex-align">
									<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
										src="https://img.yzcdn.cn/vant/cat.jpeg" />
									<view class="info">
										<view class="name">大梅体育馆</view>
										<view class="flex-align">
											<view class="tag">票务</view>
											<view class="tag">篮球</view>
										</view>
										<view class="address">江苏省南通市送仓去观音山世濠花园十六好3</view>
									</view>
								</view>
							</van-radio>
						</view>
					</van-radio-group>
				</view>

				<view class="footer">
					<view class="btn">确认</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import navbar from '@/mixins/navbar.js';

	export default {
		mixins: [navbar({
			navBarColor: '#fff'
		})],
		data() {
			return {
				navBarHeight: 0,
				assetsPath: this.$https.assetsPath,
				show: false,
				radio: '1',
				dates: [{
						label: '今日',
						value: 'today'
					},
					{
						label: '本周',
						value: 'week'
					},
					{
						label: '本月',
						value: 'month'
					},
					{
						label: '本年',
						value: 'year'
					},
				],
				dateActive: 'today',
				opts: {
					"color": ['#635df7'],
					fontSize: 12,
					"xAxis": {
						axisLineColor: 'rgb(229,229,229)',
						"disableGrid": true,
						fontColor: 'rgb(153,153,153)',
						fontSize: 10,
					},
					"yAxis": {
						gridColor: 'rgb(229,229,229)',
						data: [{
							axisLine: false,
							fontColor: 'rgb(153,153,153)',
							fontSize: 10,
							title: '收入(元)'
						}],
						showTitle: true
					},
					"legend": {
						show: false
					},
					"extra": {
						"line": {
							"type": "straight",
							"width": 2
						},
					}
				},
				chartData: {
					categories: ['07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07'],
					series: [{
						name: "",
						data: [35, 36, 31, 33, 13, 34, 35],
						pointShape: 'none',
						textColor: 'rgba(0,0,0,0)'
					}]
				},
				classify: [{
						label: '客流统计',
						img: 'bb9cbf59588539346f2da85b5c0a9619751ee55e.png',
						url: '/page_admin/data-stat/passenger-flow/passenger-flow'
					},
					{
						label: '会员分析',
						img: '8f243ea1d56fc598cf76b72b8fc9a9290fe64862.png',
						url: '/page_admin/data-stat/member-analyse/member-analyse'
					},
					{
						label: '存量资金',
						img: 'f95edc13af17409be6f14edebe5b55151961bb12.png',
						url: '/page_admin/data-stat/stock-funds/stock-funds'
					},
					{
						label: '销售榜单',
						img: 'c4ba36b07a002c1f746d2243a1553f277d5c4fed.png',
						url: '/page_admin/data-stat/sales-list/sales-list'
					},
					// { label: '品类榜单', img: '9b043c5d072739f02b67cfa8736a3f3434010a94.png' },
					{
						label: '财务收入',
						img: '504028bd70846c4375390d86e2c4d3e22233c020.png',
						url: '/page_admin/data-stat/sales-report/sales-report'
					},
					{
						label: '分类订单',
						img: '7869f0b692342e47db57fe7c34f6e6bab5fc9953.png',
						url: '/page_admin/data-stat/category-orders/category-orders'
					},
				]
			}
		},
		created() {
			const { navBarHeight } = getApp().globalData;
			this.navBarHeight = navBarHeight;
		},
		methods: {
			onClick({
				url
			}) {
				uni.navigateTo({
					url
				})
			},
			onChange(event) {
				this.radio = event.detail
			}
		},

	}
</script>

<style lang="scss" scoped>
	.data-stat {
		min-height: 100vh;
		padding: 0 36rpx 50rpx;

		.address {
			color: #fff;
			padding-top: 20rpx;
			padding-right: 30rpx;
			height: 150rpx;

			&-name {
				font-size: 34rpx;
				font-weight: 700;
				line-height: 34rpx;
			}

			&-desc {
				margin-top: 18rpx;
				font-size: 22rpx;
				line-height: 22rpx;
			}

			.exchange {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.2);
				color: rgb(234, 248, 248);
				font-size: 24rpx;
			}
		}

		.data-stat-wrapper {
			margin-top: 70rpx;
			background-color: rgb(239, 238, 253);
			border-radius: 20rpx;

			.dates {
				color: rgb(99, 93, 247);
				font-size: 30rpx;
				font-weight: 500;
				height: 84rpx;

				.date-item {
					width: 25%;
					position: relative;

					&+.date-item::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						background-color: rgb(99, 93, 247);
						width: 1rpx;
						height: 42rpx;
						margin-top: -21rpx;
					}

					&.active {
						background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61af0460d092020011e18206/16391227120474676593.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						margin-top: -16rpx;
						font-size: 36rpx;
						font-weight: 700;

						&+.date-item::before {
							display: none;
						}
					}
				}
			}

			.data-wrapper {
				padding: 30rpx;

				.date {
					font-size: 26rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 44rpx;
					font-weight: 700;
					line-height: 40rpx;
				}

				.label {
					color: rgb(51, 51, 51);
					font-size: 26rpx;
					font-weight: 500;
					line-height: 25rpx;
					margin-top: 20rpx;
				}
			}
		}

		.title {
			color: #000;
			font-size: 30rpx;
			font-weight: 700;
			margin-top: 40rpx;
		}

		.classify {
			.box {
				margin-top: 40rpx;
			}
		}

		/deep/ .good-box {
			height: 60vh;
			padding: 0px 30rpx;
			display: flex;
			flex-direction: column;

			.van-radio__label {
				line-height: inherit;
			}

			.good-list {
				flex: 1;
				height: 0;
				overflow: auto;

				.good-item {
					margin-top: 30rpx;

					.info {
						margin-left: 25rpx;

						.name {
							color: rgb(51, 51, 51);
							font-size: 30rpx;
							font-weight: 500;
							margin-bottom: 10rpx;
						}


						.tag {
							color: rgb(4, 179, 90);
							font-size: 24rpx;
							font-weight: 500;
							padding: 0px 10rpx;
							margin-right: 20rpx;
							background-color: rgba(4, 179, 90, 0.2);
							border-radius: 4rpx;

							&:nth-of-type(2) {
								color: rgb(236, 70, 246);
								background-color: rgba(236, 70, 246, 0.2);
							}
						}

						.address {
							margin-top: 10rpx;
							color: rgb(136, 136, 136);
							font-size: 22rpx;
						}
					}

				}
			}

			.footer {
				padding: 20rpx 0;
				background-color: rgb(255, 255, 255);

				.btn {
					color: rgb(255, 255, 255);
					font-size: 30rpx;
					font-weight: 700;
					padding: 20rpx 0;
					text-align: center;
					background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
					border-radius: 60rpx;
				}
			}
		}
	}
</style>
